<%--
  Created by IntelliJ IDEA.
  User: 你好
  Date: 2024/9/4
  Time: 14:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<form class="layui-form" id="tablet"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <%-- 添加这class属性layui-inline使得不会换行       --%>
        <div class="layui-inline">
            <label class="layui-form-label">付款人姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="fname" placeholder="请输入" autocomplete="off" class="layui-input" id="input_name_one">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">收款人姓名</label>
            <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao" id="mySelect">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <label class="layui-form-label" >转账时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1">
            </div>
        </div>

        <button type="button" class="layui-btn"  id="submit">搜索</button>

    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.7.1.js"></script>
<script>


  var  zhangsj;
layui.use(['table','laydate','form'], function(){
    var table = layui.table;
    var laydate = layui.laydate;
    var form =layui.form;
    //执行一个laydate实例
    laydate.render({
        elem: '#test1',
        trigger: 'click', //默认采用位置选择，隐藏有其它方式
        done: function(value, date, endDate){
            // 这里value就是用户选择的时间，你可以根据需要进行处理
            zhangsj=value;
        }
    });
    //第一个实例
  var tableIns = table.render({
      elem: '#demo'
      ,height: 312
      ,url: 'fy' //数据接口
      ,page: true //开启分页
      ,limits: [4, 8, 16 ]//每页显示条数选择项
      ,limit: 4 //每页显示的条数
      ,cols: [[ //表头
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'name', title: '付款人', width:80}
        ,{field: 'shoname', title: '收款人' , width:80, sort: true}
        ,{field: 'cardnumber', title: '收款人银行卡', }
        ,{field: 'zhangsj', title: '时间', width: 177}
        ,{field: 'amount', title: '转账金额', sort: true}
      ]],parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": 0, //解析接口状态
          "msg": "成功", //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
    });
  var names=[];
      $(function () {
          $.getJSON('transtfeServlet', show)

      })
      var name = "<%=request.getParameter("name")%>";
      var id = "<%=request.getParameter("id")%>";


      function show(data) {
          names=data
          $(data).each(function (index, v) {
              if (v.name !== name) {
                  console.log(index, v);
                  let tr = $("<option value='" + v.id + "'>" + v.name + "</option>");
                  $("#mySelect").append(tr);

              }
          })
          form.render();
      }
    $("#submit").on("click", function () {
        const z=Number($("#mySelect").val())
        let sname2=names.find(item=>item.id==z)
        const fname= $("#input_name_one").val();
        tableIns.reload({
            where:{
                name:fname,
                shoname:sname2.name,
                zhangsj:$("#test1").val()
            },
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    });

  });

</script>
</body>
</html>
